<template>
<div style="position: relative;">
  <div class="return-btn"><button type="button" class="btn btn-default" v-link="'/list'">&lt;- Go back</button></div>
  <div class="task-group-title">
    <span :style="{background: color}" style="float: right" class="label" id="tag">&nbsp;</span>
    <div style="font-size: 2em;">{{item.name}}</div>
    <div>Created by <b>{{item.author}}</b> at <b>{{item.createdTime}}</b></div>
    <div>Last edit by <b>{{item.lastEditBy}}</b> at <b>{{item.editTime}}</b></div>
  </div>
  <div class="task-group" v-for="task in item.data">
    <task v-if="task.show" :data="task"></task> 
  </div>
</div>
</template>

<script>
/* global alert */
import config from '../config'
export default {
  route: {
    data: function (transition) {
      this.$http.get('/api/item/' + this.$route.params.id).then((response) => {
        // set value
      }, (response) => {
        if (response.status === 401) {
          this.$route.go('/login')
        }
        alert('error ' + response.status + '\n' + response.body)
      })
      document.title = this.$get('item.name') + ' - ' + config.title
    }
  },
  data () {
    return {
      item: []
    }
  }
}
</script>

<style>
.task-group-title {
  text-align: center;
  margin-top: 5%;
}

.task-group {
  margin-bottom: 10px;
  width: 70%;
  margin-left: 15%;
}

.return-btn {
  position: absolute;
  left: 5%;
  top: -10px;
}
</style>
